    export default {
        name: "systemMain",
        setup(props) {
			const formRef = ref()
			const activeTab = ref('server')
            const oldConfigs = reactive({
                server: { port: 2222, url: '', name: '通用查询系统', sn: '', footer: '' },
                mysql: { username: '', password: '', host: 'localhost', port: 3306, database: '' },
                wechat: { appid: '', secret: '' },
                baidu: { BaiduAPIKey: '', BaiduSecretKey: '' },
                ai: { apikey: '', model: 'deepseek-ai/DeepSeek-V3' },
                fonts: []
            });
			const configs = reactive({
				server: {
					port: 2222,
					url: '',
					shuiyin: 'user',
					name: '通用查询系统',
					jfsc: '开启',
					reg: '开启',
					sn: '',
					footer: ''
				},
				mysql: {
					username: '',
					password: '',
					host: 'localhost',
					port: 3306,
					database: '',
				},
				wechat: {
					appid: '',
					secret: ''
				},
				baidu: {
					BaiduAPIKey: '',
					BaiduSecretKey: ''
				},
				ai: {
					apikey: '',
					model: 'deepseek-ai/DeepSeek-V3',
					ocrurl: ''
				},
				fonts: []
			})

			const rules = {
				'server.port': [
                    { 
                        validator: (rule, value, callback) => {
                            if (!value) return callback('端口不能为空');
                            if (isNaN(Number(value))) return callback('端口必须为数字');
                            if (value < 80 || value > 6000) return callback('端口范围80-6000');
                            callback();
                        },
                        trigger: 'blur'
                    }
                ],
				'server.url': [{
						required: true,
						message: '网址不能为空'
					},
					{
						pattern: /^https?:\/\/[^\s]+\/$/,
						message: '请输入以http://或https://开头，结尾有斜杠的有效URL地址'
					}
				],
				'server.name': [{
					required: true,
					message: '系统名称不能为空'
				}],
				'server.sn': [{
					required: true,
					message: '序列号不能为空'
				}],
				'mysql.port': [{
					required: true,
					message: '数据库端口不能为空'
				}],
				'mysql.host': [{
					required: true,
					message: '数据库地址不能为空'
				}],
				'mysql.username': [{
					required: true,
					message: '数据库用户名不能为空'
				}],
				'mysql.password': [{
					required: true,
					message: '数据库密码不能为空'
				}],
				'mysql.database': [{
					required: true,
					message: '数据库名称不能为空'
				}]
			}

			onMounted(async () => {
				await getConfig();
			})

			const getConfig = async () => {
				const res = await getconfigapi();
                res.server.port = Number(res.server.port);
                res.mysql.port = Number(res.mysql.port);
                // 将 fonts 对象转换为数组
                if (res.fonts && typeof res.fonts === 'object') {
                    res.fonts = Object.entries(res.fonts).map(([key, value]) => ({
                        key,
                        value
                    }));
                }
                Object.assign(configs, _.cloneDeep(res));
                Object.assign(oldConfigs, _.cloneDeep(res));
			}

			const handleSubmit = _.debounce(async () => {
				await formRef.value.validate()
				if (_.isEqual(configs, oldConfigs)) {
					return ElMessage.warning('参数未更改，无需保存')
				}
				// 转换 fonts 数组为对象
                const submitData = {
                    ...configs,
                    fonts: configs.fonts.reduce((acc, { key, value }) => {
                        if (key) acc[key] = value;
                        return acc;
                    }, {})
                };
				await saveconfigapi(submitData)
				ElMessage.success('配置保存成功')
				Object.assign(oldConfigs, _.cloneDeep(submitData));
			}, 500)

			const resetForm = () => {
				Object.assign(configs, _.cloneDeep(oldConfigs));
				//formRef.value.resetFields();
				ElMessage.success('已恢复默认配置');
			}

            const addFont = () => {
                configs.fonts.push({ key: '', value: '' }); // 添加空项由用户填写
            };
            
            const removeFont = (index) => {
                const fileName = extractFileName(configs.fonts[index].value); // 正确提取文件名
                const systemFontNames = Object.keys(systemFontMap).map(extractFileName);
                if (systemFontNames.includes(fileName)) {
                    return ElMessage.error('默认字体禁止删除')
                }
                ElMessageBox.confirm('确认删除该字体吗？', '警告', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    configs.fonts.splice(index, 1);
                }).catch((error) => {
                    if (error === 'cancel') {
                        // ElMessage.info('已取消删除')
                    } else {
                        console.error('删除操作异常:', error)
                        ElMessage.error('删除操作异常')
                    }
                })
            };
            
            // 判断默认字体
			const isDefaultFont = (item) => {
                const fileName = extractFileName(item.value); // 正确提取文件名
                const systemFontNames = Object.keys(systemFontMap).map(extractFileName);
                return systemFontNames.includes(fileName);
			}
    
            return {
                isDefaultFont,
                formRef,
                addFont,
                removeFont,
                activeTab,
                oldConfigs,
                configs,
                rules,
                getConfig,
                handleSubmit,
                resetForm,
            };
        },
        
        template: `
		<el-card class="system-config" header="系统参数配置" shadow="always">
			<el-form ref="formRef" :model="configs" label-position="top" :label-width="200" :rules="rules">
				<el-tabs v-model="activeTab" type="border-card">
					<!-- 服务器配置 -->
					<el-tab-pane label="服务器配置" name="server">
						<el-form-item label="端口" prop="server.port">
							<el-input-number v-model.number="configs.server.port" :min="80" :max="6000"	placeholder="80-6000之间" />
						</el-form-item>

						<el-form-item label="网址" prop="server.url">
							<el-input v-model="configs.server.url" placeholder="以http://或https://开头, 结尾有斜杠/" />
						</el-form-item>

						<el-form-item label="系统名称" prop="server.name">
							<el-input v-model="configs.server.name" placeholder="请输入系统名称" />
						</el-form-item>
						
						<el-form-item label="打印水印【可为空，如为user则是用户姓名】" prop="server.shuiyin">
							<el-input v-model="configs.server.shuiyin" placeholder="可为空，如为user则是用户姓名" />
						</el-form-item>

						<el-form-item label="序列号" prop="server.sn">
							<el-input v-model="configs.server.sn" placeholder="请输入序列号" />
						</el-form-item>
						
						<el-form-item label="版权信息" prop="server.footer">
							<el-input v-model="configs.server.footer" placeholder="请输入版权信息" />
						</el-form-item>
						
						<el-row>
                            <el-col :span="8">
                                <el-form-item label="积分商城" prop="server.jfsc">
                                    <el-switch v-model="configs.server.jfsc" active-value="开启" inactive-value="关闭"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">    
                                <el-form-item label="开放注册" prop="server.reg">
                                    <el-switch v-model="configs.server.reg" active-value="开启" inactive-value="关闭"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
					</el-tab-pane>

					<!-- 数据库配置 -->
					<el-tab-pane label="MySQL配置" name="mysql">
						<el-form-item label="用户名" prop="mysql.username">
							<el-input v-model="configs.mysql.username" placeholder="数据库用户名" />
						</el-form-item>

						<el-form-item label="密码" prop="mysql.password">
							<el-input v-model="configs.mysql.password" type="password" placeholder="数据库密码"
								show-password />
						</el-form-item>

						<el-form-item label="数据库名称" prop="mysql.database">
							<el-input v-model="configs.mysql.database" placeholder="数据库名称" />
						</el-form-item>

						<el-form-item label="主机地址" prop="mysql.host">
							<el-input v-model="configs.mysql.host" placeholder="默认localhost" />
						</el-form-item>

						<el-form-item label="端口" prop="mysql.port">
							<el-input-number v-model.number="configs.mysql.port" :min="0" placeholder="默认3306" />
						</el-form-item>
					</el-tab-pane>

					<!-- 微信配置 -->
					<el-tab-pane label="微信配置" name="wechat">
						<el-form-item label="AppID" prop="wechat.appid">
							<el-input v-model="configs.wechat.appid" placeholder="微信应用ID" />
						</el-form-item>

						<el-form-item label="AppSecret" prop="wechat.secret">
							<el-input v-model="configs.wechat.secret" type="password" placeholder="微信应用密钥"
								show-password />
						</el-form-item>
					</el-tab-pane>

					<!-- 百度配置 -->
					<el-tab-pane label="百度配置" name="baidu">
						<el-form-item label="API Key" prop="baidu.BaiduAPIKey">
							<el-input v-model="configs.baidu.BaiduAPIKey" placeholder="百度API Key" />
						</el-form-item>

						<el-form-item label="Secret Key" prop="baidu.BaiduSecretKey">
							<el-input v-model="configs.baidu.BaiduSecretKey" type="password" placeholder="百度Secret Key"
								show-password />
						</el-form-item>
					</el-tab-pane>

					<!-- AI配置 -->
					<el-tab-pane label="AI配置" name="ai">
						<el-form-item label="API Key" prop="ai.apikey">
							<el-input v-model="configs.ai.apikey" type="password" placeholder="硅基流动AI Key"
								show-password />
						</el-form-item>

						<el-form-item label="大模型" prop="ai.model">
							<el-input v-model="configs.ai.model" placeholder="模型" />
						</el-form-item>
						
						<el-form-item label="验证码服务器" prop="ai.ocrurl">
							<el-input v-model="configs.ai.ocrurl" placeholder="验证码服务器" />
						</el-form-item>
					</el-tab-pane>
					
					<!-- 证书字体 -->
					<el-tab-pane label="证书字体配置" name="fonts">
                        <el-form-item label="证书字体配置，注意字体后缀是ttf或ttc，默认字体是arial，系统自带字体禁止删除。" prop="fonts" required>
                            <el-button type="success" @click="addFont">添加字体</el-button>
                            <el-row style="width:100%;margin-top:20px;" :gutter="20">
                                <el-col :span="8">字体名称</el-col>
                                <el-col :span="10">字体路径</el-col>
                                <el-col :span="3">操作</el-col>
                            </el-row>
                            <el-row :gutter="20" v-for="(item, index) in configs.fonts" :key="index" style="width:100%;margin-top:20px;">
                                <el-col :span="8">
                                    <el-input v-model.trim="item.key" :disabled="isDefaultFont(item)" placeholder="字体名称"></el-input>
                                </el-col>
                                <el-col :span="10">
                                    <upload v-model="item.value" accept=".ttf, .ttc" upload-text="上传字体" :fullpath="false" :disabled="isDefaultFont(item)">
                                        <template v-if="item.value">
                                            <span class="font-path">{{ item.value }}</span>
                                        </template>
                                    </upload>
                                </el-col>
                                <el-col :span="3">
                                    <el-button size="small" type="danger" @click="removeFont(index)" :disabled="isDefaultFont(item)">删除</el-button>
                                </el-col>
                            </el-row>
                        </el-form-item>
					</el-tab-pane>
				</el-tabs>

				<el-row justify="center">
                    <el-col :span="8" style="text-align: center;margin: 20px;">
                        <el-button type="primary" size="large" @click="handleSubmit">保存配置</el-button>
                        <el-button @click="resetForm" size="large" style="margin-left: 20px;">恢复默认</el-button>
                    </el-col>
                </el-row>
                
			</el-form>
		</el-card>
        `
    }